<template>
  <div class="main-wrap">
    <navigators :back-text="back" :bg-color="bgColor"></navigators>
    <div class="about-con">
        <div class="about-top"></div>
        <div class="about-peoples">
          <h2 class="peo-title"></h2>
          <ul class="people-list">
            <li v-for="items in aboutArr">
              <h3 class="peo-name">
                {{items.pName}}
                <span class="peo-sub-name">{{items.pStaff}}</span>
              </h3>
              <p class="peo-desc">{{items.pDesc}}</p>
            </li>
          </ul>
        </div>

      <div class="about-pattern">

      </div>
      <div class="pattern-desc">

      </div>
      <div class="pattern-desc01">

      </div>
      <div class="slider-pattern">
        <yd-slider autoplay="3000">
          <yd-slider-item>

              <img src="../assets/images/about/about03.jpg">

          </yd-slider-item>
          <yd-slider-item>

            <img src="../assets/images/about/about3.jpg">

          </yd-slider-item>
        </yd-slider>

      </div>
      <div class="pattern-bottom">


      </div>
      <div class="pattern-bottom-con">

      </div>

      <scrolls></scrolls>
    </div>

  </div>
</template>

<script>
  import navigators from '../components/headers.vue';
  import scrolls from '../components/scroll.vue'
  export default {
    name: 'index',
    data () {
      return {
        heights:window.innerHeight,
        back:"返回",
        bgColor:'none',
        aboutArr:[{
          pName:" 雷.克洛克",
          pStaff:"麦当劳创始人",
          pDesc:"收入对我来讲可以有很 多方法， 而其中最美妙的方法之一是顾客脸上满意的微笑，那是很值得的，因为这代表着他会再来，而且还可能带来另一位朋友"

        },{
          pName:" 保罗·施拉格",
          pStaff:"麦当劳品牌创始人",
          pDesc:"让麦当劳在全球扩张、不断开 设分店的源动力，早已不单单是业绩增长的的需要了，而是品牌推广的需要！"
        },
          {
            pName:"居 岩",
            pStaff:"营训通创始人",
            pDesc:"品牌连锁的商业本质是用人来 传播品牌的价值；人是有个体差异的，所以人需要被训练;因此，品牌连锁企业的核心工作就是训练人。"
          },
          {
            pName:"陈 楚 伟",
            pStaff:"营训通创始人",
            pDesc:"  被训练的人会随着时间的 推移和人的不同而产生个体差异、人员更迭、效果衰减。因此，高效、全面、持续的人员评估手段就显得尤为重要。"
          }]
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{

    },
    components:{
      navigators,
      scrolls
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   @import'../css/about.css';
</style>


